<template>
  <view class="hb-w-full hb-flex hb-flex-wrap hb-justify-end hb-mt-1.5">
    <view class="message-bubble hb-inline-block hb-text-xs hb-bg-[#2878FF] hb-rounded-lg hb-p-3 hb-relative hb-max-w-[622rpx] animate-fade-right">
      <text class="hb-text-white hb-break-all">{{ message }}</text>
    </view>
  </view>
  <slot></slot>
</template>

<script lang="ts" setup>
  defineProps<{
    message: string;
  }>();
</script>

<style lang="scss" scoped>
.message-bubble {
  &::after {
    content: '';
    position: absolute;
    right: -10rpx;
    top: 30%;
    transform: translateY(-30%);
    border-left: 12rpx solid #2878FF;
    border-top: 12rpx solid transparent;
    border-bottom: 12rpx solid transparent;
  }
}

.animate-fade-right {
  animation: fadeRight 0.3s ease forwards;
}

@keyframes fadeRight {
  from {
    transform: translateX(20rpx);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>
